<template>
  <div class="comanyList padding_20">
    <el-input v-model="searchParams.doctorName"
              placeholder="请输入姓名"
              class="w-200"
              @clear="handleQuery"
              clearable/>
    <el-input v-model="searchParams.hospitalName"
              placeholder="请输入医院名称"
              class="w-200"
              @clear="handleQuery"
              clearable/>

    <el-date-picker v-model="time"
                    type="daterange"
                    range-separator="至"
                    @change="handleQuery"
                    value-format='yyyy-MM-dd'
                    placeholder="请选择申请时间"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-select v-model="searchParams.status"
               filterable
               clearable
               @change="handleQuery"
               class="input_1"
               placeholder="--请选择状态--">
      <el-option value="0" label="待跟进"></el-option>
      <el-option value="1" label="跟进中"></el-option>
      <el-option value="2" label="入驻成功"></el-option>
      <el-option value="3" label="入驻失败"></el-option>
    </el-select>
    <el-button
      type="primary"
      @click="handleQuery">查询
    </el-button>
    <Table stripe
           border
           :columns="columns"
           :data="dataList"
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <span @click="handleFollowUp(row)"
              v-if="row.currentStatus == 0">跟进</span>
        <span @click="handleSuccess(row)"
              v-if="row.currentStatus == 1">入驻成功</span>
        <span @click="handleFail(row)"
              v-if="row.currentStatus == 1">入驻失败</span>
        <span @click="handleDel(row)"
              v-if="row.currentStatus == 3">删除</span>
      </template>
    </Table>
    <Page :current.sync="currentPage"
          :total="totals"
          ref="page"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total/>
    <Modal v-model="followUpPage"
           title="跟进">
      <Input v-model="promote.promoter"
             placeholder="跟进人姓名"
             class="input_1"
             clearable/>
      <div slot="footer">
        <Button type="text"
                size="large"
                @click="followUpPage = false">取消
        </Button>
        <Button type="primary"
                size="large"
                @click="followUp">确定
        </Button>
      </div>
    </Modal>
    <Modal v-model="successPage"
           title="入驻">
      <Form :model="promote"
            label-position="right"
            :label-width="100"
            ref="form">
        <FormItem label="机构"
                  prop="title">
          <el-select placeholder="输入关键字选择机构"
                     clearable
                     v-model="promote.companyId"
                     filterable
                     remote
                     :remote-method="remoteMethod"
                     :loading="loading">
            <el-option v-for="company in companyList"
                       :value="company.id"
                       :label="company.name"
                       :key="company.id">
            </el-option>
          </el-select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text"
                size="large"
                @click="successPage = false">取消
        </Button>
        <Button type="primary"
                size="large"
                @click="handleSuccessOperation">确定
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      totals: 0,
      pageSize: 20,
      loading: false,
      time: [],
      searchParams: { // 后台要求字段为null
        doctorName: null,
        hospitalName: null,
        applyStartTime: null,
        applyEndTime: null,
        applyStatus: null,
      },
      followUpPage: false,
      successPage: false,
      companyList: '',
      promote: {
        promoter: '',
        joinId: '',
        status: 0,
        type: 2,
        companyId: '',
      },
      dataList: [],
      columns: [
        {
          title: "医生姓名",
          key: "doctorName"
        },
        {
          title: "手机号",
          key: "phoneNumber",
          width: 180
        },
        {
          title: "所在医院",
          key: "hospitalName"
        },
        {
          title: "科室",
          key: "hospitalDepartment"
        },
        {
          title: "申请合作机构类型",
          key: "applyInstitutionType",
          width: 140,
          render: (h, params) => {
            switch (params.row.applyInstitutionType) {
              case 1:
                return h("span", {}, "药店");
              case 2:
                return h("span", {}, "诊所");
              default:
                return h("span", {}, "");
            }
          }
        },
        {
          title: "机构性质",
          key: "institutionNature",
          render: (h, params) => {
            switch (params.row.institutionNature) {
              case 1:
                return h("span", {}, "连锁");
              case 2:
                return h("span", {}, "单体");
              default:
                return h("span", {}, "");
            }
          }
        },
        {
          title: "机构名称",
          key: "institutionName"
        },
        {
          title: "地址",
          key: "institutionAddress"
        },
        {
          title: "当前状态",
          key: "currentStatus",
          render: (h, params) => {
            switch (params.row.currentStatus) {
              case 0:
                return h("span", {}, "待跟进");
              case 1:
                return h("span", {}, "跟进中");
              case 2:
                return h("span", {}, "入驻成功");
              case 3:
                return h("span", {}, "入驻失败");
              default:
                return h("span", {}, "");
            }

          }

        },
        {
          title: "申请时间",
          key: "appyTime",
          width: 150,
          render: (h, params) => {
            return h('span',
              this.commonFunction.timestampFormat(new Date(params.row.applyTime), 'yyyy-MM-dd hh:mm'));
          }
        },
        {
          title: "入驻时间",
          key: "joinTime",
          width: 150,
          render: (h, params) => {
            if (params.row.joinTime == null) {
              return h('span', '');
            } else {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.joinTime), 'yyyy-MM-dd hh:mm'));
            }
          }
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ]
    }
  },
  mounted() {
    this.initTableData();
  },
  methods: {
    initTableData() {
      let pageIndex = this.currentPage - 1;
      if (this.searchParams.doctorName && this.searchParams.doctorName.trim() !== '') {
        pageIndex = 0;
      }
      let param = {
        pageSize: this.pageSize,
        pageIndex: pageIndex,
        ...this.searchParams
      };
      this.post(this.api.promote.getDoctorApplyList, param).then((res) => {
        if (res.data.code === '200') {
          if (res.data.object.length > 0) {
            this.dataList = res.data.object;
          } else {
            this.dataList = []
          }
          this.totals = res.data.totalNum;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    // 时间选择
    handleTime(val) {
      this.time = val
    },
    handleQuery() {
      this.currentPage = 1;
      if (this.time) {
        this.searchParams.startTime = this.time[0]
        this.searchParams.endTime = this.time[1]
      } else {
        this.searchParams.startTime = null
        this.searchParams.endTime = null
      }
      this.initTableData();
    },
    // 跟进
    handleFollowUp(row) {
      this.followUpPage = true;
      this.promote.promoter = '';
      this.promote.joinId = row.doctorJoinHospitalId;
    },
    // 入驻成功
    handleSuccess(row) {
      this.successPage = true;
      this.promote.joinId = row.doctorJoinHospitalId;
    },
    // 入驻失败
    handleFail(row) {
      this.$confirm('确认此操作？')
        .then(async _ => {
          this.promote.status = 3;
          this.promote.joinId = row.doctorJoinHospitalId;
          this.post(this.api.promote.join, this.promote).then(res => {
            if (res.data.code === '200') {
              this.$Message.success("操作成功！");
              this.initTableData();
            } else {
              this.$Message.error("操作失败！");
            }
          });
        })
        .catch(_ => {
        });
    },
    // 删除
    handleDel(row) {
      this.$confirm('确认删除？')
        .then(async _ => {
          const {data: res} = await this.post(this.api.promote.delDoctorApply, {
            doctorJoinHospitalId: row.doctorJoinHospitalId
          });
          if (res.data.code === '200') {
            this.$message.success('删除成功!')
            this.initTableData();
          } else if (res.data.code === '400') {
            this.$message.error(res.message)
          } else {
            this.$message.error('删除失败!')
          }
        })
        .catch(_ => {
        });
    },
    followUp() {
      if (this.promote.promoter === '' || this.promote.promoter == null) return this.$message.error('请填写跟进人姓名')
      this.promote.status = 1;
      this.post(this.api.promote.join, this.promote).then(res => {
        if (res.data.code === '200') {
          this.$Message.success("操作成功！");
          this.followUpPage = false
          this.initTableData();
        } else if (res.data.code === '400') {
          this.$message.error(res.message)
        } else {
          this.$message.error('操作失败!')
        }
      });
    },
    handleSuccessOperation() {
      if (this.promote.companyId === '' || this.promote.companyId == null) return this.$message.error('输入关键字选择机构')
      this.promote.status = 2;
      this.post(this.api.promote.join, this.promote).then(res => {
        if (res.data.code === '200') {
          this.$Message.success("操作成功！");
          this.successPage = false
          this.initTableData();
        } else {
          this.$Message.error("操作失败！");
        }
      });
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.ajax({
          type: 'post',
          url: this.api.getCompanyList,
          data: {
            pageSize: 20,
            pageStart: 0,
            name: query
          },
          success: (data) => {
            this.companyList = data.object
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      } else {
        this.companyList = [];
      }
      this.loading = false;
    }
  }
}
</script>
